<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <!--    <el-tab-pane class="group-tab-pane" label="子分组" name="subGroup" style="flex: 1">-->
    <!--      <GroupList-->
    <!--          :ref="'subGroup'"-->
    <!--          style="flex: 1; height: 100%"-->
    <!--          :from-detail="true"-->
    <!--          :ref-table="'subRefTable'"-->
    <!--          :entry="entry"-->
    <!--      />-->
    <!--    </el-tab-pane>-->
    <el-tab-pane class="group-tab-pane" label="分组属性" name="attr">
      <AttributeList :ref="'attr'"
                     :entry="entry"/>
    </el-tab-pane>

    <el-tab-pane class="group-tab-pane" label="用户列表" name="users">
      <UserAssignList
          :ref="'users'"
          :hold-type="TYPES.USER"
          :load-user="loadUsersInGroup"
          :assign-user="joinUserToGroup"
          :load-assign-user="loadUsersCanJoinGroup"
          :remove-user="removeUserFromGroup"
          :entry="entry"
          :comment="'显示领域用户分组内直接所有的用户信息'"
      />
    </el-tab-pane>
<!--    <el-tab-pane class="group-tab-pane" label="平台列表" name="plat">-->
<!--      <PlatformHolderList-->
<!--          :ref="'plat'"-->
<!--          :hold-type="TYPES.PLATFORM"-->
<!--          :load-platform="loadPlatformsInGroup"-->
<!--          :assign-platform="assignPlatsToGroup"-->
<!--          :load-assign-platform="loadAssignPlatform"-->
<!--          :remove-platform="removePlatformFromGroup"-->
<!--          :entry="entry"-->
<!--          :comment="'显示领域用户分组加入的平台信息'"/>-->
<!--    </el-tab-pane>-->
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import AttributeList from '@/widget/list/AttributeList.vue'
import {
  addUserToRealUserGroup,
  assignPlatformsToRealmUserGroup,
  loadRealmUserPage,
  realmRemoveUserFromUserGroup,
  realQueryCanAssignPlatformsPage,
  realQueryPlatformsInGroupPage,
  removeRealmUserGroupFromPlatform,
} from '@/apis'

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {useStore} from "@/stores";
import {useCurrent} from "@/utils/UseCurrentFunc";
import {ref, toRaw} from "vue";
import UserAssignList from "@/widget/assign/UserAssignList.vue";
import PlatformHolderList from "@/widget/holder/PlatformHolderList.vue";
import {handleResult} from "@/utils/SystemUtil";

const store = useStore();
const {current} = useCurrent(currentNames.USER_GROUP);
const entry = ref({
  name: currentNames.USER_GROUP,
  type: TYPES.USER_GROUP,
  server: SERVERS.REALM
});
const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('attr');

defineExpose({
  handleCurrent,
  handleSwitch,
})

// --------------------------- holders
/**
 * 分页读取加入到当前分组的用户信息
 * @param params
 */
const loadUsersInGroup = async (params: any) => {
  const realms: any = store.getCurrentRealms();
  const groups = [];
  groups.push(current().id);

  return await loadRealmUserPage({
    realmId: realms.id,
    groups: groups,
    ...params,
  })
}

const calcUserIds = (users: any) => {
  const ids: any = [];
  users.forEach((item: any) => ids.push(item.id));
  return ids;
}

/**
 * 把选定的用户加入到当前分组
 * @param users 用户数组
 */
const joinUserToGroup = async (users: any) => {
  const realms: any = store.getCurrentRealms();
  return await addUserToRealUserGroup({
    realmId: realms.id,
    groupId: current().id,
    users: calcUserIds(toRaw(users)),
  })
}

/**
 * 读取可以分配给当前分组的用户信息
 * @param params
 */
const loadUsersCanJoinGroup = async (params: any) => {
  const realms: any = store.getCurrentRealms();
  const groups = [];
  // 过滤掉已经在分组中的用户
  // parentId参数由LevelSelectorDialog自动填入
  groups.push(current().id);

  return await loadRealmUserPage({
    realmId: realms.id,
    filterGroups: groups,
    ...params
  });
}

/**
 * 从当前分组移除选择的用户
 * @param user 用户信息
 */
const removeUserFromGroup = async (user: any) => {
  const realms: any = store.getCurrentRealms();
  const users = [];
  users.push(user.id);

  return await realmRemoveUserFromUserGroup({
    realmId: realms.id,
    groupId: current().id,
    users: users,
  });
}

const loadPlatformsInGroup = async (params: any) => {
  const groups: any = [current().id];
  const realms: any = store.getCurrentRealms();
  return await realQueryPlatformsInGroupPage({
    realmId: realms.id,
    groups: groups,
    ...params
  });
}

const loadAssignPlatform = async (params: any) => {
  const groups: any = [current().id];
  const realms: any = store.getCurrentRealms();
  const result = await realQueryCanAssignPlatformsPage({
    realmId: realms.id,
    filterGroups: groups,
    ...params
  });

  if (result) {
    handleResult(result.data, ['exist']);
  }

  return result;
}

const removePlatformFromGroup = async (row: any) => {
  const realms: any = store.getCurrentRealms();
  const groups = [current().id];

  return await removeRealmUserGroupFromPlatform({
    realmId: realms.id,
    platformId: row.id,
    groups: groups,
  });
}

/**
 * 把平台分配给领域用户分组
 * @param data
 */
const assignPlatsToGroup = async (data: any) => {
  const realms: any = store.getCurrentRealms();
  const platIds: any = [];

  data.forEach((item: any) => platIds.push(item.id));

  return await assignPlatformsToRealmUserGroup({
    realmId: realms.id,
    groupId: current().id,
    platIds: platIds,
  });
}

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}
</style>
